<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="toc__container">
    <div class="toc__name">
      目录
    </div>

    <hr />
    <div class="toc__content" id="target">
      <!-- INJECT_BEGIN --><ul><li><div class="toc__title"><a href="./blockquote.html"> blockquote.html </a></div></li><li><div class="toc__title"><a href="./border-section-box-shadow.html"> border-section-box-shadow.html </a></div></li><li><div class="toc__title"><a href="./border-section.html"> border-section.html </a></div></li><li><div class="toc__title"><a href="./carousel.html"> carousel.html </a></div></li><li><div class="toc__title"><a href="./category-1.html"> category-1.html </a></div></li><li><div class="toc__title"><a href="./category.html"> category.html </a></div></li><li><div class="toc__title"><a href="./char-movie.html"> char-movie.html </a></div></li><li><div class="toc__title"><a href="./count-down.html"> count-down.html </a></div></li><li><div class="toc__title"><a href="./css-border.html"> css-border.html </a></div></li><li><div class="toc__title"><a href="./dashed-category.html"> dashed-category.html </a></div></li><li><div class="toc__title"><a href="./data-transfer.html"> data-transfer.html </a></div></li><li><div class="toc__title"><a href="./divider.html"> divider.html </a></div></li><li><div class="toc__title"><a href="./flip.html"> flip.html </a></div></li><li><div class="toc__title"><a href="./index.html"> index.html </a></div></li><li><div class="toc__title"><a href="./jsonp.html"> jsonp.html </a></div></li><li><div class="toc__title"><a href="./lazyload.html"> lazyload.html </a></div></li><li><div class="toc__title"><a href="./skew-box.html"> skew-box.html </a></div></li><li><div class="toc__title"><a href="./slash.html"> slash.html </a></div></li><li><div class="toc__title"><a href="./spin-border.html"> spin-border.html </a></div></li><li><div class="toc__title"><a href="./stack-box.html"> stack-box.html </a></div></li><li><div class="toc__title"><a href="./text-style.html"> text-style.html </a></div></li><li><div class="toc__title"><a href="./time-page.html"> time-page.html </a></div></li><li><div class="toc__title"><a href="./timeline.html"> timeline.html </a></div></li><li><div class="toc__title"><a href="./toc.html"> toc.html </a></div></li><li><div class="toc__title"><a href="./trapezoid-card.html"> trapezoid-card.html </a></div></li><li><div class="toc__title"><a href="./water-wave.html"> water-wave.html </a></div></li><li><div class="toc__title"><a href="./waterfull.html"> waterfull.html </a></div></li><li><div class="toc__title"><a href="./xhr.html"> xhr.html </a></div></li></ul><!-- INJECT_END -->
    </div>
  </div>

  <script>
    const tar = document.querySelector("#target");
    const titleElementList = document.querySelectorAll(".toc__title");

    tar.addEventListener("click", function (e) {
      if (e.target.classList.contains('toc__title')) {
        [].forEach.call(titleElementList, e => e.classList.remove('active'));
        e.target.classList.add("active");
      }
    })
  </script>

  <style>
    :root {
      display: flex;
      justify-content: center;
      background-color: #f4f5f5;

      --indent: 24px;
      --color: #000;
      --bg-color: #fff;
      --active-color: #007fff;
      --active-bg-color: #f7f8fa;
    }

    ul,
    li {
      list-style: none;
    }

    ul {
      padding-inline-start: var(--indent);
    }

    .toc__container {
      width: 480px;
      background-color: var(--bg-color);
      color: var(--color);
      padding: 16px;
      position: relative;
    }

    .toc__content>ul {
      padding-inline-start: 0;
    }

    .toc__title {
      padding: 0.4em;
    }

    .toc__title.active,
    .toc__title:hover {
      color: var(--active-color);
      background-color: var(--active-bg-color);
    }

    .toc__title.active::before {
      color: var(--active-color);
      content: "";
      display: inline-block;
      position: absolute;
      left: 0;
      width: 0.2em;
      height: 1.6em;
      background-color: var(--active-color);
    }

  </style>

  <style>
    a,
    a:link,
    a:visited,
    a:hover,
    a:active {
      text-decoration: none;
      color: inherit;
    }
  </style>

</body>

</html>
